<template>
  <div 
    class="tab-page page"
		:style="{
			paddingTop: pagePaddingTop
		}"
    >
		<nav-bar title="兴趣" left="setting" />
    <van-tabs 
      :active="active" 
      @change="onChange"
      color="#1989fa"
      >
      <van-tab title="我的圈子">
        <my-circle />
      </van-tab>
      <van-tab title="全部圈子">
        <all-circle
          :list="allCircle"
          />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  getHobbyList
} from '../utils/api'
export default {
  data() {
    return {
      tabIndex: 2,
      active: 1,
      allCircle: [],
      staticData: `
      {
  "allCircle": [{
      "name": "热门推荐",
      "id": 0,
      "list": [{
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like1/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like2/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like3/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like4/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like5/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like6/100/100",
          "describe": "分享你与喵星人的点滴"
        },
        {
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like7/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like8/100/100",
          "describe": "阿姨，手别抖"
        }
      ]
    },
    {
      "name": "吃喝玩乐",
      "id": 1,
      "list": [{
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like70/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like80/100/100",
          "describe": "阿姨，手别抖"
        },
        {
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like10/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like20/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like30/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like40/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like50/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like60/100/100",
          "describe": "分享你与喵星人的点滴"
        }
      ]
    },
    {
      "name": "兴趣同好",
      "id": 2,
      "list": [{
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like41/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like51/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like11/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like21/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like31/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like61/100/100",
          "describe": "分享你与喵星人的点滴"
        },
        {
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like71/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like812/100/100",
          "describe": "阿姨，手别抖"
        }
      ]
    },
    {
      "name": "学习",
      "id": 3,
      "list": [{
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like22/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like32/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like42/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like52/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like62/100/100",
          "describe": "分享你与喵星人的点滴"
        },
        {
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like12/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like72/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like82/100/100",
          "describe": "阿姨，手别抖"
        }
      ]
    },
    {
      "name": "热门推荐",
      "id": 5,
      "list": [{
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like13/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like23/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like33/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like43/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like53/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like63/100/100",
          "describe": "分享你与喵星人的点滴"
        },
        {
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like73/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like83/100/100",
          "describe": "阿姨，手别抖"
        }
      ]
    },
    {
      "name": "吃喝玩乐",
      "id": 6,
      "list": [{
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like7/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like8/100/100",
          "describe": "阿姨，手别抖"
        },
        {
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like1/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like2/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like3/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like4/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like54/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like64/100/100",
          "describe": "分享你与喵星人的点滴"
        }
      ]
    },
    {
      "name": "兴趣同好",
      "id": 7,
      "list": [{
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like46/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like56/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like16/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like26/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like36/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like66/100/100",
          "describe": "分享你与喵星人的点滴"
        },
        {
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like76/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like86/100/100",
          "describe": "阿姨，手别抖"
        }
      ]
    },
    {
      "name": "学习",
      "id": 8,
      "list": [{
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like2/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like3/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like4/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like5/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like6/100/100",
          "describe": "分享你与喵星人的点滴"
        },
        {
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like1/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like7/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like8/100/100",
          "describe": "阿姨，手别抖"
        }
      ]
    },
    {
      "name": "热门推荐",
      "id": 9,
      "list": [{
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like1/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like2/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like3/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like4/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like5/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like6/100/100",
          "describe": "分享你与喵星人的点滴"
        },
        {
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like7/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like8/100/100",
          "describe": "阿姨，手别抖"
        }
      ]
    },
    {
      "name": "吃喝玩乐",
      "id": 10,
      "list": [{
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like7/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like8/100/100",
          "describe": "阿姨，手别抖"
        },
        {
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like1/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like2/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like3/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like4/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like5/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like6/100/100",
          "describe": "分享你与喵星人的点滴"
        }
      ]
    },
    {
      "name": "兴趣同好",
      "id": 11,
      "list": [{
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like4/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like5/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like1/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like2/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like3/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like6/100/100",
          "describe": "分享你与喵星人的点滴"
        },
        {
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like7/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like8/100/100",
          "describe": "阿姨，手别抖"
        }
      ]
    },
    {
      "name": "学习",
      "id": 12,
      "list": [{
          "name": "DOTA2玩家俱乐部",
          "id": 1,
          "user": 65151,
          "img": "https://picsum.photos/seed/like2/100/100",
          "describe": "矿大真就没人玩这个Deadgame吗？"
        },
        {
          "name": "计算机求职交流站",
          "id": 2,
          "user": 727237,
          "img": "https://picsum.photos/seed/like3/100/100",
          "describe": "头发太多显得不专业"
        },
        {
          "name": "舞蹈交流协会",
          "id": 3,
          "user": 61102,
          "img": "https://picsum.photos/seed/like4/100/100",
          "describe": "你你你你要跳舞吗💃"
        },
        {
          "name": "一起来学习",
          "id": 4,
          "user": 58005,
          "img": "https://picsum.photos/seed/like5/100/100",
          "describe": "学不动了，求求你们别学了"
        },
        {
          "name": "喵星人保护协会",
          "id": 5,
          "user": 546,
          "img": "https://picsum.photos/seed/like6/100/100",
          "describe": "分享你与喵星人的点滴"
        },
        {
          "name": "饮料爱好者协会",
          "id": 0,
          "user": 81973,
          "img": "https://picsum.photos/seed/like1/100/100",
          "describe": "果汁、汽水、柠檬......有这些饮料，谁要喝矿泉水？"
        },
        {
          "name": "点啥外卖",
          "id": 6,
          "user": 1215,
          "img": "https://picsum.photos/seed/like7/100/100",
          "describe": "这么好吃的外卖不推荐给大家真的说不过去"
        },
        {
          "name": "食堂吃点啥",
          "id": 7,
          "user": 7841,
          "img": "https://picsum.photos/seed/like8/100/100",
          "describe": "阿姨，手别抖"
        }
      ]
    }
  ]
}`
    }
  },
  methods: {
    onChange(event) {
      console.log(event.detail)
    },
    useStaticData() {
      this.allCircle = JSON.parse(this.staticData).allCircle
    }
  },
  onLoad() {
    this.useStaticData()
    // getHobbyList().then(
    //   res => {
    //     console.log(res)
    //     this.allCircle = res.data.allCircle
    //   }
    // )
  }
}
</script>

<style lang="less" scoped>
.page {
  van-tab {
    box-shadow: 0 1rpx 4rpx 0 rgba(0, 0, 0, .1);
  }
}
</style>